<template>
  <div class="first">
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel height="500px">
        <el-carousel-item v-for="item in banner" :key="item.carousel_id">
          <img :src="item.imgPath" alt="" width="auto" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <div>
      <h3>手机</h3>
        <ul class="cart">
            <li v-for=" item in sjlist" :key="item.product_id">
                <img :src="item.product_picture" alt="">
                <p>{{item.product_name}}</p>
                <p> <span style="color:#eee;">{{item.product_title}}</span></p>
                <p><span style="color:red;">{{item.product_price}}</span></p>
            </li>
             <li>
               <h2 @click="$router.push('/two')">游览更多</h2>
            </li>
        </ul>

         <h3>家电</h3>
        <ul class="cart">
            <li v-for=" item in jdlist" :key="item.product_id">
                <img :src="item.product_picture" alt="">
                <p>{{item.product_name}}</p>
                <p> <span style="color:#eee;">{{item.product_title}}</span></p>
                <p><span style="color:red;">{{item.product_price}}</span></p>
            </li>
            <li>
             <h2 @click="$router.push('/two')">游览更多</h2>
            </li>
        </ul>


         <h3>配件</h3>
        <ul class="cart">
            <li v-for=" item in pjlist" :key="item.product_id">
                <img :src="item.product_picture" alt="">
                <p>{{item.product_name}}</p>
                <p> <span style="color:#eee;">{{item.product_title}}</span></p>
                <p><span style="color:red;">{{item.product_price}}</span></p>
            </li>
             <li>
              <h2 @click="$router.push('/two')">游览更多</h2>
            </li>
        </ul>
    </div>

    <div class="foot">
      <img src="../../assets/3.png" alt="" width="100%">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      banner: "",
      sjlist:"",
      jdlist:"",
      pjlist:"",

    };
  },
  mounted() {
    this.$axios({ url: "/resources/carousel", method: "post" }).then((res) => {
      // console.log(res.data);
      this.banner = res.data.carousel;
    });

    this.$axios({
      url: "/product/getPromoProduct",
      method: "post",
      data: { categoryName: "手机" },
    }).then((res) => {
      // console.log(res);
      this.sjlist=res.data.Product
    });

     this.$axios({
      url: "/product/getPromoProduct",
      method: "post",
      data: { categoryName: "电视机" },
    }).then((res) => {
      // console.log(res);
      this.jdlist=res.data.Product
    });


     this.$axios({
      url: "/product/getPromoProduct",
      method: "post",
      data: { categoryName: "保护套"},
    }).then((res) => {
      // console.log(res);
      this.pjlist=res.data.Product
    });
  },
};
</script>

<style lang="scss" scoped>
h3{
    margin: 20px 0;
    line-height: 50px;
    text-align: left;
}
h2{
    line-height: 300px;
}
.cart{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    background: #EEE;
    // justify-content: space-around;

    li{
        margin: 20px 10px;
        background: #fff;
        flex-basis: 22%;
        box-shadow: 5px 5px 5px 5px rgb(187, 185, 185);
        img{
            width: 229px;
            height: 229px;
        }
         p{
          margin: 10px 0;
        }
    }

}
.foot{
  width: 120%;
}
</style>